<template>
  <el-dropdown trigger="click" class="international" @command="onChangeLang">
    <div>
      <svg-icon class-name="international-icon" icon-class="language" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item :disabled="currentLanguage === 'zh'" command="zh">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#el-mg-cionChina"></use>
        </svg>
        中文
      </el-dropdown-item>
      <el-dropdown-item :disabled="currentLanguage === 'en'" command="en">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#el-mg-cionyingguoguoqi"></use>
        </svg>
        English
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>
<script>
export default {
  name: 'Lang',

  data() {
    return {}
  },

  computed: {
    currentLanguage() {
      return this.$i18n.locale
    }

    // const handleCommand = (val) => {
    //   i18n.locale.value = val
    //   store.commit('app/changLang', val)
    //   localStorage.setItem('lang', val)
    // }
  },
  methods: {
    // 切换方法onChangeLang的处理, 这里的弹出框是element-ui的组件
    onChangeLang(val) {
      console.log(val)
      console.log(this.$i18n.locale)
      this.$store.commit('setLanguage', val)
      //   let lang = this.$i18n.localevsl

      this.$i18n.locale = val
      // 对应main.js配置文件中的localStorage的get方法
      localStorage.setItem('lang', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.international {
  position: relative;

  .international-icon {
    display: inline-block;
    cursor: pointer;
    fill: #5a5e66;
    width: 21px;
    height: 21px;
  }
}
.icon {
  width: 3em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
